<template>
	<hx-navbar title="登录"></hx-navbar>
	<view class="login-container">
		<view class="login-wrap">
			<view class="login-top">
				<image src="@/static/logo.png"> </image>
			</view>
			<view class="login-content">
				<view class="title">欢迎登录{{ globalTitle }}</view>
				<!-- 微信快速登录 -->
				<!-- #ifdef MP -->
				<view v-if="state.loginType == '1'">
					<Quicklogin></Quicklogin>
				</view>
				<!-- #endif -->
				<!-- 手机号密码登录 -->
				<view v-if="state.loginType == '2'">
					<Password></Password>
				</view>
				<!-- 手机号验证码登录 -->
				<view v-if="state.loginType == '3'">
					<Mobile></Mobile>
				</view>
			</view>
			<u-divider bg-color="">其他登录方式</u-divider>
			<view class="buttom">
				<view class="loginType">
					<!-- #ifdef MP -->
					<view class="item" v-if="state.loginType != '1'">
						<view class="icon"><u-icon size="50" name="weixin-fill" color="rgb(83,194,64)" @click="state.loginType = '1'"></u-icon></view>
					</view>
					<!-- #endif -->
					<view class="item" v-if="state.loginType != '2'">
						<view class="icon"><u-icon size="50" name="lock" color="rgb(17,183,233)" @click="state.loginType = '2'"></u-icon></view>
					</view>
					<view class="item" v-if="state.loginType != '3'">
						<view class="icon"><u-icon size="50" name="phone" color="rgb(17,183,233)" @click="state.loginType = '3'"></u-icon></view>
					</view>
				</view>
				<view class="hint">
					登录代表同意
					<text class="link">{{ globalTitle }}用户协议、隐私政策，</text>
					并授权使用您的{{ globalTitle }}账号信息（如昵称、头像、收获地址）以便您统一管理
				</view>
				<view style="display: flex; flex-direction: column; align-items: center">
					<image style="width: 100px; height: 100px" src="@/static/logo2.png"> </image>
					<view class="version"> {{ copyright }} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { useUserStore } from '@/stores/user';
// 引入组件
import Mobile from './component/mobile.vue';
import Password from './component/password.vue';
import Quicklogin from './component/quicklogin.vue';
import { Local } from '@/utils/storage';

// 定义变量
const globalTitle = ref(import.meta.env.VITE_GLOBAL_TITLE);
const copyright = ref(import.meta.env.VITE_COPYRIGHT);
const state = reactive<{ loginType: string }>({
	// #ifdef MP
	loginType: '1', //1./微信授权手机号快速登录；2.密码登录；3.手机号验证码登录
	//#endif
});
onLoad((options) => {
	console.log(options);

	// #ifndef MP
	state.loginType = '3';
	//#endif
	// #ifdef MP
	if (!Local.get('wxUserId') && !Local.getToken()) {
		useUserStore()
			.maLogin()
			.then((res: any) => {
				if (res.data.tokenValue) {
					uni.$hxRouter.push({ type: 'switchTab', url: '/pages/home/index' });
				}
			});
	}
	// #endif
});
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
}

.login-container {
	padding: 20rpx;
	height: 100%;
	border-radius: 10rpx;

	.login-wrap {
		font-size: 28rpx;

		.login-top {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx;

			image {
				width: 160rpx;
				flex: 0 0 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
		}

		.login-content {
			margin: 30rpx;
			padding: 40rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			// box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

			.title {
				text-align: left;
				font-size: 45rpx;
				font-weight: 500;
				margin-bottom: 40rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				align-items: center;
				justify-content: center;

				.item {
					color: $u-content-color;
					font-size: 28rpx;
					padding: 40rpx;
				}
			}

			.version {
				text-align: center;
				font-size: 24rpx;
				color: #909090;
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
}
</style>
